<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>模板引用</h2>
    <!-- 
      在需要引用的元素上面添加一个ref属性，比如ref="abc"
      在js里面通过this.$refs.abc获取到这个元素

      这种做法和原生js的 document.querySelector("abc") 是一样的
      推荐用ref去获取


      并不是在任何时机都能获取到
      必须在元素渲染完成以后才可以
    -->
    <input type="text" ref="ipt">
    <button @click="fn">btn</button>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {}
      },
      methods: {
        fn() {
          console.log(document.querySelector("input"));
          console.log(this.$refs.ipt);
        }
      },
      created() {
        console.log("created");
        console.log(this.$refs.ipt);
      },
      mounted() {
        console.log("mounted");
        console.log(this.$refs.ipt);
      }
    }).mount("#app")

  </script>
</body>
</html>